<template>
  <div class="home-search">
    <form class="m-input f-bd f-bd-btm" method="get" action="#">
      <div class="inputcover">
        <i class="iconfont icon-sousuo" @click="searchIcon"></i
        ><input
          type="search"
          name="search"
          class="input"
          placeholder="搜索歌曲、歌手、专辑"
          autocomplete="off"
         @input="change"
          value=""
          v-model="value"
        
          @keydown.enter="enterDown"
        
        />
        <div class="close"><i class="iconfont icon-jiufuqianbaoicon08" @click="delValue"></i></div>
      </div>
    </form>
    
   
    <ul class="search-list" v-if="changed ||searchSong.length!=0">
      <li v-for="item in searchSong" :key="item.id" @click="value=item.name;searchIcon()" ><i class="iconfont icon-sousuo" @click="searchIcon();value=item.name"></i>{{item.name}}<i class="iconfont icon-jiufuqianbaoicon08" @click="delValue()"></i></li>
    </ul>




    <div class="hot-search" v-if="!changed ||searchSong.length==0">
      <p>热门搜索</p>
      <ul class="hot-song-list">
        <li v-for="list in searchList" :key="list.id" @click="value=list.searchWord;getSearch(list.searchWord);searchIcon()">{{list.searchWord}}</li>
      
      </ul>
    </div>
    <ul class="win-search" >
      <li v-for="(win,index) in keylist" :key="index">{{win}}</li>
    </ul>
  <SearchSongList  v-if="Search" :value="value" :playsong="playsong " @singer-song="$emit('singer-song',$event)"/>
  </div>
</template>

<script>
import SearchSongList from "@/components/SearchSongList.vue";
export default {
  
  props:["playsong"],
  data:function(){
    return {
      value:null,
      searchSong:[],
      changed:false,
      Search:false,
      searchList:null,
      keylist:JSON.parse(window.localStorage.getItem("key"))||[]
     
    }
  },
    components: {
     SearchSongList
  },
  methods: {
    getSearch:function(value){
        this.axios
      .get("https://apis.netstart.cn/music/search/suggest?keywords="+value)
      .then((res) => {
        
        this.searchSong=res.data.result.songs
       
       
      }).catch(err=>{
        err
        this.searchSong=[]
     
      });
    },
    enterDown:function(){
      this.Search=true
    },
    searchIcon:function(){
    this.Search=true
    if(this.value){
    this.keylist.includes(this.value)?'':  this.keylist.push(this.value)
    window.localStorage.setItem("key",JSON.stringify(this.keylist))
    }
    
   
    },

    delValue:function(){
      this.Search=false
      this.value=''
      this.changed=false
    },
   
   

    change:function(){
      this.changed=true
    },

  },
   created:function(){
        this.axios
      .get("https://apis.netstart.cn/music/search/hot/detail")
      .then((res) => {
      
        this.searchList=res.data.data
      });
    },


  watch:{
    value:function(n){
      this.value=n
      this.getSearch(n)
    }
  }
};
</script>

<style lang="less" scoped>
.home-search {
  position: relative;
  top: 122px;
  height: 100vh;
  form{
    margin: 10px;
    background: #EBECEC;
    border-radius: 20px;

    .inputcover{
      display: flex;
      align-items: center;
      i{
        font-size: 16px;
        margin-left: 5px;
      }
      .input{
        flex: 1;
        border-radius: 20px;
        border: none;
        outline: none;
      }
      .close{

        i{
          margin-right: 5px;
        }
      }
    }
  }
  h4{
    font-size: 16px;
    color: aqua;
    margin-left: 10px;
  }

  .search-list{
    list-style: none;
    padding: 0;
    li{
      margin: 5px 10px;
      position: relative;
      i{
         &:nth-of-type(1){
         margin-right: 3px;
        }
        &:nth-of-type(2){
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }

  .hot-search{
    p{
      margin-left: 10px;
    }
    .hot-song-list{
     list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      margin-left: 5px;
      li{
        border: 1px solid #999;
        border-radius: 10px;
        margin: 5px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        padding: 0 5px;

        
      }
    }
  }
  .win-search{
   padding: 0;
   margin: 10px;
    li{
      list-style: none;
    }
  }
}
</style>